<template>
  <div>
<!--    //预定主题-->
<!--    private String reserveTopic;-->

<!--    //预定备注-->
<!--    private String reserveNotes;-->
    <el-row style="margin-top: 10px;float: left">
    <el-input v-model="reserveSelectLike.reserveTopic" placeholder="请输入预定主题" style="width: 550px;margin-right:10px"></el-input>
    <el-input v-model="reserveSelectLike.reserveNotes" placeholder="请输入预定备注" style="width: 550px"></el-input>
    <el-button @click="selectLike" type="primary" icon="el-icon-search">查询</el-button>
    </el-row>
    <br><br><br>
    <!--表单，新增-->
    <el-row style="margin-top: 15px;margin-bottom: 10px ;float: left" >
    <el-button type="primary" @click="dialogFormVisibleAdd = true ;addReserve()" size="medium" >添加预约</el-button>
    </el-row>

<!--   弹出框 添加信息 -->
    <el-dialog title="添加车辆预约信息" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="reserve">
        <el-form-item label="预定编号" :label-width="formLabelWidth">
          <el-input v-model="reserve.reserveNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预定主题" :label-width="formLabelWidth">
          <el-input v-model="reserve.reserveTopic" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="驾驶员" :label-width="formLabelWidth">
          <el-select v-model="reserve.driverId" placeholder="请选择">
            <el-option
              v-for="item in optionsDriver"
              :key="item.driverId"
              :label="item.driverName+item.phoneNumber"
              :value="item.driverId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="车辆信息" :label-width="formLabelWidth">
          <el-select v-model="reserve.carId" placeholder="请选择">
            <el-option
              v-for="item in optionsCar"
              :key="item.carId"
              :label="item.carCode+item.carBrand"
              :value="item.carId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间" :label-width="formLabelWidth">
            <el-date-picker type="date" placeholder="请选择时间" v-model="reserve.startTime" style="width: 100%;"></el-date-picker>
        </el-form-item >
        <el-form-item label="结束时间" :label-width="formLabelWidth">
            <el-date-picker type="date" placeholder="请选择时间" v-model="reserve.endTime" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="reserve.reserveNotes" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="add">添 加</el-button>
      </div>
    </el-dialog>
    <!--   弹出框 修改信息 -->
    <el-dialog title="修改车辆预约信息" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="reserve">
        <el-form-item label="预定编号" :label-width="formLabelWidth">
          <el-input prefix-icon="el-icon-search"  :disabled="true"  v-model="reserve.reserveNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预定主题" :label-width="formLabelWidth">
          <el-input  prefix-icon="el-icon-search" v-model="reserve.reserveTopic" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="驾驶员" :label-width="formLabelWidth">
          <el-select v-model="reserve.driverId" placeholder="请选择">
            <el-option
              v-for="item in optionsDriver"
              :key="item.driverId"
              :label="item.driverName+item.phoneNumber"
              :value="item.driverId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="车辆信息" :label-width="formLabelWidth">
          <el-select  v-model="reserve.carId" placeholder="请选择">
            <el-option
              v-for="item in optionsCar"
              :key="item.carId"
              :label="item.carCode+item.carBrand"
              :value="item.carId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间" :label-width="formLabelWidth">
          <el-date-picker type="date" placeholder="请选择时间" v-model="reserve.startTime" style="width: 100%;"></el-date-picker>
        </el-form-item >
        <el-form-item label="结束时间" :label-width="formLabelWidth">
          <el-date-picker type="date" placeholder="请选择时间" v-model="reserve.endTime" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input  type="textarea" v-model="reserve.reserveNotes" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="edit">修 改</el-button>
      </div>
    </el-dialog>

    <!--    数据显示 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <!--  prop :表示每一次循环显示对象的属性的值  -->
      <el-table-column
        prop="reserveNumber"
        label="预定编号"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="reserveTopic"
        label="预定主题"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
        prop="driverName"
        label="驾驶员"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phoneNumber"
        label="联系电话"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="carCode"
        label="车牌号"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="carBrand"
        label="车辆品牌"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
      prop="endTime"
      label="结束时间"
      align="center"
      width="150">
    </el-table-column>
      <el-table-column
        prop="reserveNotes"
        label="备注"
        align="center"
        width="150">
      </el-table-column>


      <el-table-column
        label="操作"
        align="center"
        width="150">
        <!--      scope:所有的数据
                  scope.row:获取某一行的属性
        -->
        <template slot-scope="scope">
          <el-button @click="dialogFormVisibleEdit= true ;editReserve(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
          <el-button @click="deleteReserveById(scope.row.reserveId)"  type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页插件-->
    <center>
      <div class="block" v-show="!isLike">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.page"
          :page-sizes="[1, 2, 5]"
          :page-size="pageData.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </center>

  </div>
</template>


<script>
export default {
  data() {
    return {
      pageData: {
        page: 1,//默认第一页
        size: 5,//显示条数默认5条/页
      },
      //预定添加信息，查询驾驶员信息
      selectData: {
        page: 1,//默认第一页
        size: 50,//显示条数默认5条/页
      },
      total: 0,
      tableData: [],

      dialogTableVisibleAdd: false,
      dialogFormVisibleAdd: false,
      dialogTableVisibleEdit: false,
      dialogFormVisibleEdit: false,
      //预定信息
      reserve: {
        reserveId:'',
        reserveNumber: '',
        reserveTopic: '',
        startTime: '',
        endTime: '',
        reserveNotes: '',
        reserveState: '',
        driverId:'',
        carId:'',
      },
      formLabelWidth: '80px',
      //模糊查询
      reserveSelectLike:{
        reserveTopic:'',
        reserveNotes:'',
      },
      isLike:false,
      optionsDriver:[],
      optionsCar:[],
    }
  },
  methods: {

    editReserve(reserveData){
      this.reserve.reserveId=reserveData.reserveId
      this.reserve.reserveNumber=reserveData.reserveNumber
      this.reserve.reserveTopic=reserveData.reserveTopic
      this.reserve.reserveNotes=reserveData.reserveNotes
      this.reserve.carId=reserveData.carId
      this.reserve.driverId=reserveData.driverId
      this.reserve.startTime=reserveData.startTime
      this.reserve.endTime=reserveData.endTime
      console.log(reserveData)
    },
    //修改信息
    edit(){
      this.$confirm('确认修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisibleEdit=false;
        console.log("reserveEdit:",this.reserve)
        let _this=this;
        this.$axios({
          method:'post',
          url:'reserve/updateReserve/',
          data:JSON.stringify(this.reserve)
        }).then(res =>{
          console.log(res)
          if(res.data.status === 200){
            _this.$message(res.data.msg);
            _this.showTable()
          }else{
            console.log(res.data)
          }
        }).catch(error=>{
          this.$message.error(error);
        })
      }).catch(() => {
      });
    },
    //提交新增信息
    addReserve(){
      this.reserve={}
    },
    add(){
      this.$confirm('确认添加？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisibleAdd=false;
        console.log("add:",this.reserve)
        let _this=this;
        this.$axios({
          method:'PUT',
          url:'reserve/insertReserve/',
          data:JSON.stringify(this.reserve)
        }).then(res =>{
          console.log(res)
          if(res.data.status === 200){
            _this.$message(res.data.msg);
            _this.showTable()
          }else{
            console.log(res.data)
          }
        }).catch(error=>{
          this.$message.error(error);
        })
      }).catch(() => {
      });

    },

    //删除
    deleteReserveById(id){
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogFormVisible=false;
        let _this=this;
        console.log(id)
        this.$axios({
          method:'delete',
          url:'reserve/deleteReserve/'+id,
        }).then(res =>{
          console.log(res)
          if(res.data.status === 200){
            _this.$message(res.data.msg);
            _this.showTable()
          }else{
            console.log(res.data)
          }
        }).catch(error=>{
          this.$message.error(error);
        })
      }).catch(() => {
      });

    },
    //模糊查询
    selectLike(){
      let _this=this;
      this.$axios({
        method:'get',
        url:'reserve/selectLike/',
        params:this.reserveSelectLike
      }).then(res =>{
        console.log(res)
        if(res.data.status === 200){
          console.log(res.data)
          console.log(res.data.data)
          //push方法将对象转成数组
          _this.tableData = res.data.data
          _this.isLike=true
          console.log("模糊查询:",this.tableData)
        }else{
          console.log(res.data)
        }
      }).catch(error=>{
        this.$message.error(error);
      })
    },


    showTable() {
      let _this=this;
      this.$axios({
        method:'get',
        url:'reserve/reserveList/',
        params:this.pageData
      }).then(res =>{
        // console.log(res)
        if(res.data.status === 200){
          //push方法将对象转成数组
          _this.tableData = res.data.data.records
          _this.total = res.data.data.total
        }else{
          console.log("status:",res.data)
        }
      }).catch(error=>{
        this.$message.error(error);
      })
    },
    handleSizeChange(newSize) { // size 发送改变执行的函数
      this.pageData.size = newSize;
      this.showTable()
      console.log(newSize)
    },
    handleCurrentChange(newPage) {// page 发送改变执行的函数
      this.pageData.page=newPage
      this.showTable()
      console.log(newPage)
    },
    //获取驾驶员信息
    getDriver() {
      let _this = this;
      // console.log("table::::::::::", this.options)
      this.$axios({
        method: 'get',
        url: 'driver/driverList/',
        params: this.selectData
      }).then(res => {
        // console.log(res)
        if (res.data.status === 200) {
          //push方法将对象转成数组
          _this.optionsDriver = res.data.data.records
          // console.log("tableDriver", this.options)
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        this.$message.error(error);
      })
    },
    //获取车辆信息
    getCar() {
      let _this = this;
      this.$axios({
        method: 'get',
        url: 'car_info/carInfoAll/',
        params: this.selectData
      }).then(res => {
        // console.log(res)
        if (res.data.status === 200) {
          //push方法将对象转成数组
          _this.optionsCar = res.data.data.records
          // console.log("tableCar", this.options)
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        this.$message.error(error);
      })
    },

  },
  mounted() {
    this.username=sessionStorage.getItem('loginUsername')
    this.showTable()
    this.getDriver()
    this.getCar();
  }


}
</script>
<style scoped>

</style>
